<template>
       <div class="my-tag"  @dblclick="showIput" >
              <input
                v-if="edit"
                class="input"
                type="text"
                 v-focus
                placeholder="输入标签"
                ref="inp"
                 v-model="abc"
              @blur='close'
              @keyup="show"
             
              />
              <div class="text" v-else >{{value}}</div>
            </div>
</template>
 
<script>

export default {
  name: "HmTag",
  components: {},
  props: {
    value:{
      required:false,
      type:String
    }
  },
  data() {
    return {
      edit:false,
      abc:''
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    showIput(){
      this.edit=true
    /*  this.$nextTick(()=>{{this.$refs.inp.focus()}} ) */
     this.value=this.abc 
    },
    close(){
      /* 失焦的时候显示茶具 */
      this.edit=false
      this.$emit('input',this.abc)
    },
    show(){
      this.$emit('input',this.abc)
    }
  },
/* directives:{
  focus:{
    inserted(el){
      el.focus()
    }
  }
} */
};
</script>

<style scoped lang='less' >
   .my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}  
</style>